<script setup lang="ts">
import { getRecommendList } from '@/services/consult'
import type { ParamsConfig, RecommendRows } from '@/types/consult'
import { ref } from 'vue'
import DoctorItem from './DoctorItem.vue'
const emits = defineEmits<{
  (e: 'closePop'): void
}>()
const paramsConfig = ref<ParamsConfig>({
  current: 1,
  pageSize: 10
})
const loading = ref(false)
const finished = ref(false)
const list = ref<RecommendRows[]>([])
const total = ref(0)
// 获取医生列表 触底加载
const onLoad = async () => {
  if (refreshing.value) {
    // 如果是下拉刷新，需要将数据和请求参数初始化
    list.value = []
    paramsConfig.value.current = 1
    refreshing.value = false
  }
  const data = await getRecommendList(paramsConfig.value)
  total.value = data.data.total
  list.value.push(...data.data.rows)
  loading.value = false
  // 判断数据是否请求完成
  if (paramsConfig.value.current * paramsConfig.value.pageSize >= total.value) {
    // 数据请求完成
    finished.value = true
  } else {
    paramsConfig.value.current++
  }
}
// 下拉刷新
const refreshing = ref(false)
// const refreshFlag = ref(false)
const onRefresh = async () => {
  // 下拉刷新，将list数组置为空，同时将请求参数重置，然后重新获取数据
  // finished.value = true
  loading.value = true
  onLoad()
}
</script>

<template>
  <div class="more-doctor-page">
    <DP-NavBar
      class="navBar"
      title="全部推荐"
      :back="
        () => {
          emits('closePop')
        }
      "
    ></DP-NavBar>
    <div class="list">
      <van-pull-refresh v-model="refreshing" @refresh="onRefresh">
        <van-list
          v-model:loading="loading"
          :finished="finished"
          finished-text="没有更多了"
          @load="onLoad"
        >
          <doctor-item
            v-for="item in list"
            :key="item.id"
            :item="item"
            @changeLikeStatus="item.likeFlag = $event === true ? 1 : 0"
          ></doctor-item>
        </van-list>
      </van-pull-refresh>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.navBar {
  position: fixed;
  top: 0;
}
.list {
  overflow-y: auto;
  padding-top: 46px;
  height: 93vh;
}
.top {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  line-height: 46px;
  width: 100%;
  height: 46px;
  background-color: red;
  color: #fff;
  z-index: 999;
}
</style>
